<template>
  <Card title="快捷导航" v-bind="$attrs">
    <CardGrid v-for="item in insideList" :key="item.ID">
      <span class="flex flex-col items-center" @click="handleGo(item)">
        <Icon :icon="item?.meta?.icon" :color="getColor()" size="20" />
        <span class="text-md mt-2">{{ t(item.meta.title) }}</span>
      </span>
    </CardGrid>
  </Card>
</template>
<script lang="ts" setup>
import { Card, CardGrid } from 'ant-design-vue';
import { ref, watch } from "vue";
import XEUtils from 'xe-utils';
import { RouteItem } from "/@/api/admin/menu";
import { Icon } from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGo } from '/@/hooks/web/usePage';

const props = defineProps({
  list: {type:Array<RouteItem>, default: () => []},
})

const colorList = ['#1fdaca', '#bf0c2c', '#e18525', '#3fb27f', '#4daf1bc9', '#00d8ff']
const getColor = () => {
  let i = XEUtils.random(0, colorList.length-1)
  return colorList[i]
}

const insideList = ref<RouteItem[]>()
watch(()=>props.list, (v1, _) => {
  if (v1 && v1.length > 0) {
    insideList.value = v1
  }
}, {immediate: true, deep: true,})

const { t } = useI18n();
const go = useGo();
const handleGo = (item:RouteItem) => {
  go({name: item.name})
}

</script>

<style scoped>
:deep(.items-center) {
  min-width: 90px;
}
</style>
